<template>
  <div id="main">
    <v-head></v-head>
    <v-side></v-side>
    <el-form method="post" action="searchTipByKeyword.do">
      <div class="input-group col-md-3" style="margin-top:2px; float: left; text-align: center;">
        <el-input
          type="text"
          class="form-control"
          id="keyword"
          name="keyword"
          placeholder="请输入要搜索的内容"
        />
        <span class="input-group-btn">
          <el-button type="primary">搜索</el-button>
        </span>
      </div>
    </el-form>

    <div style="background-color: white">
      <a style="margin-left: 2%">活跃</a>
      <a style="margin-left: 2%">精华</a>
      <a style="margin-left: 2%">最近</a>
    </div>
    <el-card class="box-card" style="width:70%">
      <div slot="header" class="clearfix" v-for="(tip,index) in tips" :key="index">
        <div v-if="tip.tipIsdeleted != 1" style="height: 50px">
          <div style="width: 89%;float: left">
            <router-link :to="{path:'showTip.do',query:{tipId:tip.tipId}}"  style="color:blue">{{tip.tipTitle}}</router-link>
            <span class="label label-success" v-if="tip.tipIsKnot == 1">结贴</span>
            <br />
            <div>
              
              <router-link :to="{}" style="color:pink">{{tip.forumName}}</router-link>
              <router-link :to="{}" style="color:yellow" class="label label-warning" >{{tip.tabName}}</router-link>&nbsp;&nbsp;&nbsp;
              <router-link :to="{path:'getUserInfo.do',query:{userId:tip.userId}}"  style="color:red">
                <span>
                  <span v-if="tip.userNick!=null">{{tip.userNick}}</span>
                  <span v-else-if="tip.userNick==null">{{tip.userNick}}</span>
                </span>
              </router-link>&nbsp;&nbsp;&nbsp;
              <small class="text-muted">
                <span>'发表时间：' {{tip.tipPublishTime}}</span>
                &nbsp;&nbsp;
                <span>'更新时间：'{{tip.tipModifyTime}}</span>
                &nbsp;&nbsp;
                <span
                  class="label label-warning"
                  title="点击量"
                >{{tip.tipClick}}次点击</span>
              </small>
            </div>
          </div>
          <div style="width: 5%;float: right;text-align: center">
            <span class="label label-info" title="回复数">{{tip.tipReplies}}条回复</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
// import bus from "../assets/js/bus";
import vHead from "../components/Header";
import vSide from "../components/Side";
// import axios from "axios";
import Tips from "../api/tips";
export default {
  //数据
  data() {
    return {
      tips: []
    };
  },
  created() {
    Tips.getAll()
      .then(res => {
        this.tips = res.data.tips;
        console.log(res.data);
      })
      .catch(err => {
        console.log(err);
      });
    // axios
    //   .get("/getTipData")
    //   .then(res => {
    //     this.tips = res.data.tips;
    //   })
    //   .catch(err => {
    //     console.error(err);
    //   });
  },
  components: {
    vHead,
    vSide
  }
};
</script>

<style>
li {
  list-style-type: none;
}
.el-card__header{
  border: none;
}
html,
body {
  height: 100%;
  font-size: 14px;
  color: #525252;
  font-family: NotoSansHans-Regular, AvenirNext-Regular, arial, Hiragino Sans GB,
    "Microsoft Yahei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
  background: #f0f2f5;
}
.footer {
  background-color: #fff;
  margin-top: 22px;
  margin-bottom: 22px;
  width: 100%;
  padding-top: 22px;
  color: #8a8a8a;
  display: block;
  height: 200px;
  border: 1px;
  clear: both;
}

.container {
  margin-right: 5%;
  margin-left: 5%;
  padding-left: 15px;
  padding-right: 15px;
  width: 40%;
  float: left;
}
.info {
  margin-right: 5%;
  width: 10%;
  float: left;
}
a {
  color: #8a8a8a;
  cursor: pointer;
  padding: 0px 5px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.clearfix{
  padding: 10px 10px;
  border-bottom: solid 1px #bbafaf30;
}
.box-card {
  width: 480px;
}
.el-card{
      margin-top: 50px;
}
</style>